
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { BookOpen, Users, Clock, Star } from "lucide-react";

const studentCases = [
  {
    id: "1",
    title: "Climate Change Impact Analysis",
    description: "Analyze real climate data and propose solutions for your local community",
    subject: "Environmental Science",
    difficulty: "Intermediate",
    duration: "2-3 hours",
    participants: "Individual or Group",
    rating: 4.8
  },
  {
    id: "2",
    title: "Social Media & Mental Health Study",
    description: "Research the relationship between social media usage and student wellbeing",
    subject: "Psychology",
    difficulty: "Beginner",
    duration: "1-2 hours",
    participants: "Individual",
    rating: 4.6
  },
  {
    id: "3",
    title: "Local Business Economics",
    description: "Examine how local businesses adapt to economic changes in your area",
    subject: "Economics",
    difficulty: "Advanced",
    duration: "3-4 hours",
    participants: "Group",
    rating: 4.9
  }
];

export function StudentRealWorldCases() {
  return (
    <div className="space-y-6">
      <div className="text-center mb-8">
        <h3 className="text-xl font-semibold mb-2">Real-World Learning Cases</h3>
        <p className="text-gray-600">Interdisciplinary case examples to build critical thinking</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {studentCases.map((case_) => (
          <Card key={case_.id} className="hover:shadow-lg transition-shadow">
            <CardHeader>
              <div className="flex items-start justify-between mb-2">
                <Badge variant="secondary" className="text-xs">
                  {case_.subject}
                </Badge>
                <div className="flex items-center gap-1">
                  <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  <span className="text-sm text-gray-600">{case_.rating}</span>
                </div>
              </div>
              <CardTitle className="text-lg">{case_.title}</CardTitle>
              <CardDescription>{case_.description}</CardDescription>
            </CardHeader>
            
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
                <div className="flex items-center gap-1">
                  <BookOpen className="w-4 h-4" />
                  <span>{case_.difficulty}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  <span>{case_.duration}</span>
                </div>
                <div className="flex items-center gap-1 col-span-2">
                  <Users className="w-4 h-4" />
                  <span>{case_.participants}</span>
                </div>
              </div>
              
              <Button className="w-full">
                Start Case Study
              </Button>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
